<template>
    <PageWrapper>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          :actionColumn="actionColumn"
          virtual-scroll
        >
          <template #tableTitle>
            <n-space align="center">
              <n-button type="primary" @click="openCreateDrawer">
                <template #icon>
                  <n-icon>
                    <FileAddOutlined />
                  </n-icon>
                </template>
                新增广告
              </n-button>
            </n-space>
          </template>
        </BasicTable>
      </n-card>

      <CreateDrawer
        ref="createDrawerRef"
        :title="drawerTitle"
        :roleList="roleData"
        @change="reloadTable"
      />

    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { h, reactive, ref } from 'vue';
    import { useMessage } from 'naive-ui';
    import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
    import { FileAddOutlined } from '@vicons/antd';
    import { columns } from './columns';
    import { list,Del } from '@/api/advert/index';
    import CreateDrawer from './CreateDrawer.vue';
  
    const message = useMessage();
    const basicTableRef = ref();
    const tableData = ref();
    const createDrawerRef = ref();
    const drawerTitle = ref('新增广告');
    const roleData = ref([]);
  
    const params = reactive({
      
    });

    // 操作
    const actionColumn: BasicColumn = reactive({
      width: 150,
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      render(record) {
        return h(TableAction as any, {
          actions: [
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            }, {
              label: '删除',
              onPositiveClick: handleDelete.bind(null, record),
              isConfirm: true,
              confirmContent: '您确定要删除吗？',
            },
          ],
        });
      },
    });
  
    //列表数据
    const loadDataTable = async (res) => {
      const result = await list({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };

    //新增
    function openCreateDrawer() {
      const { openDrawer } = createDrawerRef.value;
      openDrawer();
    }

    // 编辑
    function handleEdit(record: Recordable) {
      drawerTitle.value = '编辑广告';
      const { openDrawer } = createDrawerRef.value;
      openDrawer(record.id);
    }
    
    //删除
    function handleDelete(record: Recordable) {
      Del({ id: record.id }).then(() => {
        message.success('删除成功');
        reloadTable();
      });
    }

    //加载表格
    function reloadTable() {
      basicTableRef.value.reload();
    }
  
  </script>
  
  <style lang="less" scoped></style>
  